<template>
	<div class="page">
		<div class="p-10 system-page-background b-radius-4">
			<my-form inline query :model="queryParams" :formItem="queryFormItem" :searchFn="() => refTable.reload()" />
		</div>
		<div class="flex-auto flex-col system-page-background m-t-10 b-radius-4">
			<div class="p-10">
				<my-button type="primary" @click="insertFn()" icon="Plus">新 增</my-button>
				<my-button type="danger" :disabled="!tableSelection.length" @click="deleteFn(tableSelection)" icon="Delete"> 删 除 </my-button>
			</div>
			<div class="flex-auto flex-col">
				<my-list-panel ref="refTable" :total="state.total" :loadFn="loadData">
					<template #default="{ page, size }">
						<my-table
							:data="state.list"
							:columns="state.columns"
							lazy
							:load="
								(tree, treeNode, resolve) => {
									loadFnResolve.add(tree.id);
									resolve(tree.children);
								}
							"
							@row-click="
								(row, column, event) => {
									event.currentTarget?.querySelector('.el-table__expand-icon')?.click();
								}
							"
							row-key="id"
							@selection-change="(val) => (tableSelection = val)"
						>
							<template #index="{ $index }">{{ $index + 1 + (page - 1) * size }}</template>
							<template #default="{ row }">
								<my-button-text @click="detailFn(row)">查看</my-button-text>
								<my-button-text @click="updateFn(row)">修改</my-button-text>
								<my-button-text @click="deleteFn(row)">删除</my-button-text>
							</template>
						</my-table>
					</template>
				</my-list-panel>
			</div>
		</div>

		<!-- 添加、修改对话框 -->
		<el-dialog :title="dialogTitle" v-model="dialog.open" width="570px" append-to-body @closed="resetForm(refDialogFrom)">
			<my-form
				ref="refDialogFrom"
				:model="dialog.form"
				label-width="110px"
				:disabled="['detail'].includes(dialog.name)"
				:formItem="[
					{ label: '知识库编号', prop: 'knowledgeCode' },
					{ label: '知识库名称', prop: 'knowledgeName', maxlength: 60, showWordLimit: true },
					{ label: '知识库备注', prop: 'knowledgeRemark' },
					{
						label: '上级',
						prop: 'parentId',
						itemType: 'cascader',
						list: state.list,
						props: { value: 'id', label: 'knowledgeName', expandTrigger: 'hover', emitPath: false, checkStrictly: true }
					},
					{ label: '显示顺序', prop: 'orderNum', itemType: 'number' }
				]"
				:rules="{
					knowledgeCode: [
						{ min: 2, max: 10, message: '长度在2到10个字符', trigger: 'change' },
						{ required: true, message: '请输入知识库编号', trigger: 'change' }
					],
					knowledgeName: [{ required: true, message: '请输入知识库名称', trigger: 'change' }]
				}"
			>
				<template #orderNum="{ model, prop }">
					<el-input-number v-model="model[prop]" :min="1" :max="9999999" />
				</template>
			</my-form>
			<template #footer>
				<my-button @click="dialog.open = false">取 消</my-button>
				<my-button type="primary" v-if="!['detail'].includes(dialog.name)" @click="dialogSubmitFn()">确 定</my-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { addKnowledgeType as add, removeKnowledgeType as remove, editKnowledgeType as edit, pageKnowledgeType as page } from '@a/system';

let loadFnResolve = new Set(),
	queryParams = ref({}),
	queryFormItem = [
		{ label: '知识库编号', prop: 'knowledgeCode' },
		{ label: '知识库名称', prop: 'knowledgeName' }
	],
	state = ref({
		total: 0,
		list: [],
		columns: [
			{
				type: 'selection'
			},
			{ label: '知识库编号', prop: 'knowledgeCode', minWidth: 130 },
			{ label: '知识库名称', prop: 'knowledgeName', minWidth: 120 },
			{ label: '知识库备注', prop: 'knowledgeRemark', minWidth: 160 },
			{
				label: '操作',
				width: 150,
				showOverflowTooltip: false,
				align: 'center'
			}
		]
	}),
	// 弹出层
	dialog = ref({
		title: '知识库',
		open: false,
		name: '',
		form: {
			id: undefined,
			orderNum: 1
		}
	}),
	tableSelection = ref([]);

// 表格数据
const refTable = shallowRef(null),
	refDialogFrom = shallowRef(null);
const { dialogTitle, loadData, insertFn, deleteFn, updateFn, detailFn, dialogSubmitFn } = pageMixin({
	queryParams,
	queryFormItem,
	state,
	api: { page, remove, add, edit },
	dialog,
	refTable,
	refDialogFrom
});
</script>

<style lang="scss" scoped></style>
